<template>
  <div class="outer-box">
    <div class="main-box">
        <title-item>留言板</title-item>
        <dir class="main-box-inner" v-if="isLogin">
            <div class="message-box">
                <img src="../../assets/img/Message/head.png" alt=""><span>亲爱的{{name}}</span>
                <br>
                <textarea v-model="message"></textarea>
                 <div class="whiteBlock" v-if="message===''">请写下你想对太原理工大学说的祝福吧！</div>
                <div id="uploadButton" @click="uploadContent"><icon iconClass="shangchuan" color="white"/> 上传 </div>
            </div>
        </dir>
        <dir class="login-box-inner" v-if="!isLogin">
            <div class="message-box-login">
                <img src="../../assets/img/Message/head.png" alt="">
                <div class="photoBox"><icon iconClass="xiangji" color="white" /></div>
                <input type="file" id="upload-box" ccept=".png,.jpg,.webp"  @change="updataFile">
                <input type="text" placeholder="请添加昵称" v-model="name">
                <br>
                <span>使用微信头像和昵称</span>
                <div class="flex-box">
                    <div class="comfirm" @click="confirm">确认上传</div>
                    <div>取消</div>
                </div>
            </div>
        </dir>
    </div>
  </div>
</template>

<script>
import TitleItem from '../../components/TitleItem.vue'
export default {
  components: { TitleItem },
name:'Message',
data(){
    return{
        message:'',
        isLogin:false,
        name:'',
        avatar:'',
        url:''
    }
},
methods:{
    uploadContent(){
        const obj ={
        avatar:this.url,
        content:this.message,
        userName:this.name
        }
        this.$api.msgApi.insertMsg(obj).then((res)=>{
            if(res.msg=='成功'){
                 this.$message({
                    message: '上传成功！',
                    type: 'success'
                });
                this.$router.push('/')
            }else{
                this.$message.error('上传失败');
            }
        })
    },
    updataFile(e){
        this.avatar=e.target.files[e.target.files.length-1]
    },
    confirm(){
        let param = new FormData(); //创建form对象
        param.append('file',this.avatar)
        if(this.name===''){
            this.$message.error('请先输入昵称哦');
        }else if(this.name.length>14){
            this.$message.error('昵称过长');
        }else{
        this.$api.msgApi.uploadImg(param).then((res)=>{
            this.url = res.data
            this.isLogin=true
        })
        }
    }
}
}
</script>

<style lang="less" scoped>
#upload-box{
    position: absolute;
    top:30px;
    left: 40%;
    width: 150px;
    height: 110px;
    opacity: 0;
}
.outer-box{
    width: 1420px;
    height: 100vh;
    margin: 0 auto;
}
.main-box{
    width: 720px;
    height: 400px;
    margin: 0 auto;
    margin-top: 80px;
}
.main-box-inner,.login-box-inner{
    position: relative;
     width: 730px;
    height: 350px;
    border: 5px solid rgba(254, 186, 186, 0.91);
}
.message-box{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;
   width: 700px;
    height: 330px;;
    background-color: rgba(170, 55, 53, 0.7);
    img{
        margin-top: 20px;
        margin-left: 30px;
        width: 50px;
        height: 50px;
    }
    span{
        position: relative;
        top: -10px;
        margin-left: 20px;
        color: rgba(255, 255, 255, 0.5)
    }
    textarea{
        width: 600px;
        height: 180px;
        margin: 10px auto;
        display: block;
        outline: none;
        background: transparent;
        color:rgba(255, 255, 255);
        opacity: 0.5;
        font-size: 20px;
        border: none;
        resize:none
    }
    .whiteBlock{
        position: absolute;
        left: 50%;
        top:40%;
        font-size: 18px;
        transform: translate(-50%);
        color:rgba(255, 255, 255, 0.5) ;
    }
    #uploadButton{
        position: absolute;
        bottom: 20px;
        right: 30px;
        width: 80px;
        height: 35px;
        line-height: 35px;
        border-radius:5px;
        color: white;
        background-color: #E54E43;
        text-align: center;
    }
}
    .message-box-login{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;
   width: 700px;
    height: 330px;;
    background-color: rgba(170, 55, 53, 0.7);
        img{
        width: 70px;
        height: 70px;
        margin: 10px auto;
        display: block;
        margin-top: 30px;
        }
        .photoBox{
            width: 25px;
            height: 25px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius:50% ;
            text-align: center;
            line-height: 25px;
            margin: 10px auto;
        }
        input{
            width: 250px;
            height: 36px;
            display: block;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.5);
            outline: none;
            border: none;
            border-radius: 10px;
            color: white;
        }
        span{
        margin-left: 250px;
        color: white;
        font-size: 14px;
        cursor: default;
        }
        .flex-box{
        display: flex;
        width: 250px;
        margin: 30px auto;
        justify-content: space-around;
        cursor: default;
        div{
            height: 25px;
            width: 100px;
            background-color: #FFEADB;
            border-radius:20px ;
            text-align: center;
            line-height: 25px;
            font-size: 14px;
        }
      .comfirm{
        color: white;
        background-color: #DE3F35;
        }
        }
    }
</style>